import * as React from "react";
import { makeStyles } from "@material-ui/styles";
import { StyleRules } from "@material-ui/styles/withStyles";
import { Carousel, Icon, WingBlank } from "antd-mobile";
import HeaderImage from "../images/headerImage.png";
import { MdAccountBalance, MdPermPhoneMsg } from "react-icons/md";
import MiddleView from "./MiddleView";

/**
 * 描述：
 *  主页
 * @author sunshixiong
 * @date 2019/3/13-10:41
 */
const useStyles = makeStyles<StyleRules<any, "root" | "header" | "ions">>({
  root: {
    minWidth: 320,
    maxWidth: 640,
    margin: "0 auto",
    "& .am-wingblank.am-wingblank-lg": {
      margin: 0
    }
  },
  header: {
    margin: "0 15px",
    height: 35,
    display: "flex",
    alignItems: "center",
    "& .middleImage": {
      flex: 1,
      textAlign: "center",
      "& img": {
        width: 100
      }
    }
  },
  ions: {
    width: 20,
    height: 20
  }
});

const Main = () => {
  const classes = useStyles();
  const imageData = ["yuesao1", "yuesao2"];
  return (
    <div className={classes.root}>
      <div className={classes.header}>
        <MdAccountBalance size={20} color={"#e36154"} />
        <div className={"middleImage"}>
          <img src={HeaderImage} />
        </div>
        <a href={"tel:18384945900"}>
          <MdPermPhoneMsg size={20} color={"#e36154"} />
        </a>
      </div>
      <WingBlank>
        <Carousel autoplay={true} infinite={true}>
          {imageData.map(val => (
            <a
              key={val}
              style={{ display: "inline-block", width: "100%", height: 176 }}
            >
              <img
                src={require(`../images/${val}.jpg`)}
                style={{ width: "100%", verticalAlign: "top" }}
              />
            </a>
          ))}
        </Carousel>
      </WingBlank>
      <MiddleView />
    </div>
  );
};

export default Main;
